<!-- 万年历 -->
<template>
  <div class="content">
    <Calendar @dayChange="dayChange" @monthChange="monthChange"> </Calendar>
    <div class="bg-white" style="margin-top: 5px;padding: 1rem;" @click="toAlmanac">
      <div class="flex-a-c" style="padding-bottom: 0.875rem;border-bottom: 1px solid #D9D9D9;">
        <div class="nonli">农历</div>
        <div class="f-bold" style="font-size: 2rem;margin: 0 0.875rem;">{{ dayStr }}</div>
        <div style="flex: 1;border-left: 1px solid #D9D9D9;padding-left: 0.875rem;font-size: 17px;" class="t-l">
          <div style="color: #000000;">{{ weekStr }}</div>
          <div style="color: #BD7E54;">{{ yearStr }}</div>
        </div>
      </div>
      <div class="flex-a-c" style="margin-top: 0.5rem;">
        <div class="cu-tag f-bold">宜</div>
        <div class="f-16 t-l" style="color: #2C9C56;">{{ yi }}</div>
      </div>
      <div class="flex-a-c" style="margin-top: 0.5rem;">
        <div class="cu-tag f-bold" style="background: #D32D30;">忌</div>
        <div class="f-16 t-l" style="color: #D32D30;">{{ ji }}</div>
      </div>
    </div>

  </div>
</template>

<script>
import Calendar from "./components/Li-Calendar/Li-Calendar.vue";
const { Lunar } = require("./lunar.js");
export default {
  data() {
    return {
      selectDay: "",
      dayStr: "",
      weekStr: "",
      yearStr: "",
      yi: "",
      ji: ""
    };
  },

  created() {
    $http.get('member.login.check-login',{},".");//主要是判断登录和获取底部导航
    let curDate = new Date();
    this.selectDay = curDate.getFullYear() + "/" + (curDate.getMonth() + 1) + "/" + curDate.getDate();
    this.render();
  },

  components: { Calendar },

  computed: {},

  mounted() {},

  methods: {
    render(setDateStr) {
      console.info("开始进行首页下数据渲染:" + setDateStr);
      let dd = setDateStr ? new Date(setDateStr) : new Date(this.selectDay);
      let d = Lunar.fromDate(dd);
      this.dayStr = d.getMonthInChinese() + "月" + d.getDayInChinese();
      this.yearStr = d.getYearInGanZhi() + "(" + d.getYearShengXiao() + ")年";
      this.weekStr = "星期" + d.getWeekInChinese();
      this.ji = d.getDayJi().join(" ");
      this.yi = d.getDayYi().join(" ");
    },
    dayChange(data) {
      this.selectDay = data.time;
      this.render(data.time);
      console.log("日期选择变更", data);
    },
    monthChange(data) {
      console.log("月份选择变更", data);
    },
    toAlmanac() {
      this.$router.push(this.fun.getUrl('almanac', {}, {data: this.selectDay}));
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.content {
  background: #f9f1e5;
  min-height: calc(100vh - 50px);
  padding-top: 0.75rem;
  background-image: url("./bg2.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
}
.bg-white {
  margin: 0 0.75rem 0.75rem;
  padding-bottom: 0.75rem;
  background: rgba(255, 249, 240, 0.5);
  border-radius: 8px;
  border: 1px solid #BD7E54;
}
.nonli {
  width: 38px;
  height: 76px;
  background: #FFEED4;
  border-radius: 19px;
  border: 1px solid #BD7E54;
  font-size: 25px;
  font-weight: bold;
  color: #BD7E54;
  writing-mode: vertical-rl;
}
.cu-tag {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #2C9C56;
  color: #fff;
  font-size: 18px;
  border-radius: 50%;
  margin-right: 0.5rem;
}
</style>
